<template>
  <view class="product-list-item" @click="navigateToDetail">
    <image :src="product.mainImage" mode="aspectFill" class="product-image"></image>
    <view class="product-info">
      <text class="product-name">{{ product.name }}</text>
      <text v-if="product.subtitle" class="product-subtitle">{{ product.subtitle }}</text>
      <view class="product-meta">
        <view class="rating" v-if="product.rating">
          <uni-icons type="star-filled" size="14" color="#ff9900"></uni-icons>
          <text>{{ product.rating }}</text>
          <text class="review-count" v-if="product.reviewCount">({{ product.reviewCount }})</text>
        </view>
        <text class="sales" v-if="product.sales">销量 {{ product.sales }}</text>
      </view>
      <view class="product-price">
        <text class="price">¥{{ product.price }}</text>
        <text class="original-price" v-if="product.originalPrice && product.originalPrice > product.price">¥{{ product.originalPrice }}</text>
      </view>
      <view class="product-tags" v-if="product.tags && product.tags.length">
        <text 
          v-for="(tag, index) in product.tags.slice(0, 3)" 
          :key="index" 
          class="tag"
        >{{ tag }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductListItem',
  props: {
    product: {
      type: Object,
      required: true,
      default: () => ({
        id: '',
        name: '',
        subtitle: '',
        mainImage: '',
        price: 0,
        originalPrice: 0,
        rating: 0,
        reviewCount: 0,
        sales: 0,
        tags: []
      })
    }
  },
  methods: {
    navigateToDetail() {
      if (!this.product.id) {
        console.error('商品ID不存在，无法跳转:', this.product);
        uni.showToast({
          title: '商品信息不完整',
          icon: 'none'
        });
        return;
      }
      
      console.log('跳转到商品详情页, ID:', this.product.id);
      
      uni.navigateTo({
        url: `/pages/product/detail/index?id=${this.product.id}`,
        success: () => {
          console.log('跳转成功，商品ID:', this.product.id);
        },
        fail: (err) => {
          console.error('跳转失败:', err);
          try {
            const api = getApp().globalData.api || require('@/config/api').default;
            if (api && api.product && typeof api.product.getDetail === 'function') {
              console.log('尝试使用API预加载商品详情');
              api.product.getDetail(this.product.id)
                .then(res => {
                  console.log('预加载商品详情成功:', res);
                })
                .catch(error => {
                  console.error('预加载商品详情失败:', error);
                });
            }
          } catch (e) {
            console.error('调用API失败:', e);
          }
          
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.product-list-item {
  display: flex;
  padding: 20rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  
  .product-image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  
  .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .product-name {
      font-size: 28rpx;
      color: #333;
      @include multi-ellipsis(2);
      margin-bottom: 6rpx;
    }
    
    .product-subtitle {
      font-size: 24rpx;
      color: #666;
      @include multi-ellipsis(1);
      margin-bottom: 10rpx;
    }
    
    .product-meta {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      .rating {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        
        text {
          font-size: 24rpx;
          color: #333;
          margin-left: 4rpx;
        }
        
        .review-count {
          color: #999;
          margin-left: 4rpx;
        }
      }
      
      .sales {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .product-price {
      display: flex;
      align-items: baseline;
      margin-bottom: 10rpx;
      
      .price {
        font-size: 32rpx;
        color: #ff5500;
        font-weight: bold;
        margin-right: 10rpx;
      }
      
      .original-price {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
    
    .product-tags {
      display: flex;
      flex-wrap: wrap;
      
      .tag {
        font-size: 20rpx;
        color: #ff5500;
        background-color: rgba(255, 85, 0, 0.1);
        border-radius: 4rpx;
        padding: 2rpx 8rpx;
        margin-right: 10rpx;
        margin-bottom: 4rpx;
      }
    }
  }
}
</style> 